<template>
    <div class="app-container">
        <div class="tech-border-out">
            <div class="tech-border">
                <el-card>
                    <div slot="header" class="clearfix">
                        <dv-decoration-7 style="width:200px;height:30px;;"> <p style="padding: 0 15px;">历史报警信息</p>  </dv-decoration-7>
                    </div>
                    <div class="filter-container">
                            <el-input v-model="listQuery.name" placeholder="请输入设备名称" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                            <el-input v-model="listQuery.code" placeholder="请输入设备编码" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                            <el-cascader
                                   clearable
                                    placeholder="请选择设备分类"
                                    v-model="listQuery.cate_id"
                                    :options="category_list" 
                                    style="width: 200px;margin-right: 10px;margin-bottom:10px"
                                />
                            <el-select v-model.trim="listQuery.status" placeholder="请选择状态" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item">
                                <el-option v-for="(status, key) in statusOptions" :key="key" :value="parseInt(key)" :label="status"></el-option>
                            </el-select>


                            <el-select v-model.trim="listQuery.project_id" placeholder="请选择项目" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item">
                                <el-option v-for="(project, key) in projects_list" :key="key" :value="parseInt(project.id)" :label="project.title"></el-option>
                            </el-select>

 
                            <el-select v-model.trim="listQuery.alarm_type" placeholder="请选择报警类型" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item">
                                <el-option v-for="item in alarm_types" :key="item.id" :value="item.id" :label="item.title"></el-option>
                            </el-select>

                        <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                        {{ '搜索' }}
                        </el-button>
                    </div>
                    <el-table
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        :data="list"
                        size="medium"
                        fit
                        highlight-current-row
                        class="table-container"
                        style="width: 100%"
                        row-key="id"
                        max-height="950"
                        :tree-props="{children: 'children'}"
                        >  
                        
                    <el-table-column  align="left" label="设备名称" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  label="设备编码" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.code }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" label="设备分类">
                        <template slot-scope="scope">
                            <span v-if="scope.row.equipment">{{ scope.row.equipment.cate.name }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                  

                    <el-table-column  align="center" label="所属项目">
                        <template slot-scope="scope">
                            <span v-if="scope.row.equipment.project">{{ scope.row.equipment.project.title }}</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="设备地址">
                        <template slot-scope="scope">
                            <span>{{ scope.row.equipment.province }} - {{ scope.row.equipment.city }} - {{ scope.row.equipment.area }} - {{ scope.row.equipment.address }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="项目负责人">
                        <template slot-scope="scope">
                            <span v-if="scope.row.equipment.admin">
                                <div>{{ scope.row.equipment.admin.nickname }}</div>
                                <div> {{ scope.row.equipment.admin.phone }}</div>
                            </span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="报警类型">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.alarm" size="small"  type="success"> {{ scope.row.alarm.title }} </el-tag>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="报警信息">
                        <template slot-scope="scope">
                            <span>{{ scope.row.alarm_info }}</span>
                        </template>
                    </el-table-column>
                   

                    <el-table-column  align="center" label="报警时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.alarm_time}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="处理时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.process_time}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column  align="center" label="处理方式">
                        <template slot-scope="scope">
                            <el-tag  v-if="scope.row.status == 1" type="danger">消警</el-tag>
                            <el-tag  v-if="scope.row.status == 2" type="danger">误报</el-tag>
                        </template>
                    </el-table-column>

        
                    </el-table>
                    <dv-decoration-10 :dur="1" style="height:5px;" />
                </el-card>
            </div>
        </div>
       
                <!-- 处理报警弹窗 -->
                <el-dialog
                    :visible.sync="processDialog.visible"
                    width="650px"
                    :show-close="false"
                    :before-close="handleProcessDialogClose"
                >
                <dv-border-box-11  class="el-new-dialog" :title="processDialog.title" style="padding-left: 15px;">
                    <el-form>
                        <el-form-item label="处理详情">
                            <el-input
                                type="textarea"
                                :rows="10"
                                placeholder="请输入处理详情"
                                v-model="processDialog.remark"
                            ></el-input>
                            <div style="margin-top: 10px;">
                                <el-button type="warning" icon="el-icon-circle-close" @click="handleProcessDialogClose">取消</el-button>
                                <el-button type="primary" icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="handleProcessConfirm">提交</el-button>
                            </div>
                           
                        </el-form-item>
                    </el-form>
                </dv-border-box-11>
                   
                </el-dialog>
    </div>
</template>
<script>
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del,edit,equipment_switch } from '@/api/equipments' // api接口
    import { new_alarm, history_alarm,equipment_alarm_new_init,process_alarm } from '@/api/equipment_alarm' // api接口
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件 

    export default{
        name: 'alarmNew',
        components: { Pagination }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
        data() {
            return {
                headerObj: {
                    'Authorization': 'Bearer ' + getToken()
                },
                map:null,
                list: [], // 列表数据
                total: 0, // 总条数
                select_ids : [], // 选中的id集合
                category_list : [], // 分类列表
                projects_list : [], // 项目列表
                alarm_types : [], // 报警类型列表
                listQuery: { //列表查询参数
                    page: 1,
                    limit: 10,
                    status:"",
                    name:"",
                    code:"",
                    cate_id:"",
                    alarm_type:""
                },
                statusOptions: {
                    0: '离线',
                    1: '在线', 
                    2: '异常',
                    3: '报警',
                    4: '故障'
                },
                processDialog: { // 处理报警弹窗
                    visible: false,
                    title: '',
                    remark: '',
                    currentRow: null,
                    processType: null // 1:消警, 2:误报
                },
                create: { // 新增
                    dialogVisible: false
                },  
                edit: { // 编辑
                    dialogVisible: false,
                    id: ''
                },  
                locationDialogVisible: false, // 设备位置弹窗
                currentDevice: {}, // 当前设备信息
                map: null // 百度地图实例
            }
        },
        created() {
            this.getList()
            this.init();
        },
        methods: {
            init() {
                equipment_alarm_new_init().then(response => {
                    this.category_list = response.data.category_list
                    this.projects_list = response.data.projects
                    this.alarm_types = response.data.alarm_types
                })
            },
                 // 处理消警
            handleClearAlarm(row) {
                this.processDialog = {
                    visible: true,
                    title: '消警处理',
                    remark: '',
                    currentRow: row,
                    processType: 1
                }
            },
            
            // 处理误报
            handleFalseAlarm(row) {
                this.processDialog = {
                    visible: true,
                    title: '误报处理',
                    remark: '',
                    currentRow: row,
                    processType: 2
                }
            },
            
            // 关闭处理弹窗
            handleProcessDialogClose() {
                this.processDialog = {
                    visible: false,
                    title: '',
                    remark: '',
                    currentRow: null,
                    processType: null
                }
            },

            // 确认处理报警
            handleProcessConfirm() {
                if (!this.processDialog.remark.trim()) {
                    this.$message.warning('请输入处理详情')
                    return
                }
                
                const params = {
                    id: this.processDialog.currentRow.id,
                    process_type: this.processDialog.processType,
                    process_remark: this.processDialog.remark.trim()
                }
                
                process_alarm(params).then(response => {
                    this.$message({
                        message: '处理成功',
                        type: 'success'
                    })
                    this.handleProcessDialogClose()
                    this.getList() // 刷新列表
                }).catch(error => {
                    this.$message.error('处理失败：' + error.message)
                })
            },
        
            checkPermission, // 权限判断函数
            
            // 下拉菜单命令处理
            handleCommand(command) {
                const { action, index, row } = command
                switch (action) {
                    case 'edit':
                        this.handleEdit(index, row)
                        break
                    case 'delete':
                        this.handleDelete(index, row)
                        break
                    case 'detail':
                        this.handleDetail(index, row)
                        break
                    case 'location':
                        this.showDeviceLocation(row)
                        break
                }
            },
            // 跳转到详情页面
            handleDetail(index, row) {
                // 方式1：使用路由跳转（推荐）
                this.$router.push({
                    path: `/equipment/detail`,
                    query: {
                        id: row.id
                    }
                })},
            
            // 显示设备位置
            showDeviceLocation(row) {
                this.currentDevice = row
                this.locationDialogVisible = true
                
                // 确保经纬度存在
                if (!row.longitude || !row.latitude) {
                    this.$message.warning('该设备暂无位置信息')
                    return
                }
                
                // 下次DOM更新后初始化地图
                this.$nextTick(() => {
                    this.initMap(parseFloat(row.longitude), parseFloat(row.latitude))
                })
            },
            
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            getStatusType(status) {
                const typeMap = {
                    0: 'info',      // 离线 - 灰色
                    1: 'success',   // 在线 - 绿色
                    2: 'warning',   // 异常 - 黄色
                    3: 'danger',    // 报警 - 红色
                    4: 'danger'     // 故障 - 红色
                }
                return typeMap[status] || 'info'
            },
            switch_status(row){
                equipment_switch({id:row.id,'status':row.status}).then(res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }).catch(err => {
                    this.$message.error(err.message);
                })
            },
            getList() { // 获取列表
                history_alarm(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                    })
                },
            handleCreate() { // 新增对话框显示
                this.create.dialogVisible = true
            },  
            handleEdit(index, row) { // 编辑对话框显示
                this.edit.dialogVisible = true
                this.edit.id = row.id
            },  
            handleDelete(index, row) { // 删除
                const thiz = this
                this.$confirm('确认要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(row.id).then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1500,
                        onClose() {
                            thiz.getList();
                        }
                    })
                    })
                }).catch(() => {

                })
            }   
        }
    }
</script>
<style scoped> 
    ::v-deep .el-icon-arrow-right{
        color: #fff!important;
    }
    .el-cascader{
        width: 350px!important;
    }
    .status-badge {
        display: inline-block;
        padding: 2px 20px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
    }

    .status-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }

    .status-badge:hover::before {
        left: 100%;
    }

    /* 状态颜色样式保持不变 */
    .status-0 {
        background: linear-gradient(135deg, #909399, #606266);
        color: white;
        border: 1px solid #5a5e66;
    }

    .status-1 {
        background: linear-gradient(135deg, #67c23a, #529b2e);
        color: white;
        border: 1px solid #4a8c29;
    }

    .status-2 {
        background: linear-gradient(135deg, #e6a23c, #d48220);
        color: white;
        border: 1px solid #c7731d;
    }

    .status-3 {
        background: linear-gradient(135deg, #f56c6c, #d63031);
        color: white;
        border: 1px solid #c12c2c;
        animation: pulse 2s infinite;
    }

    .status-4 {
        background: linear-gradient(135deg, #f56c6c, #c00000);
        color: white;
        border: 1px solid #a00000;
        box-shadow: 0 0 10px rgba(245, 108, 108, 0.5);
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7); }
        70% { box-shadow: 0 0 0 6px rgba(245, 108, 108, 0); }
        100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
    }

    /* 地图容器样式 */
    .map-container {
        padding: 10px;
    }

    .location-info {
        margin-top: 15px;
        padding: 15px;
        background: #07192E;
        border-radius: 4px;
    }

    .location-info p {
        margin: 5px 0;
        font-size: 14px;
    }

    /* 下拉菜单样式优化 */
    ::v-deep .el-dropdown-menu {
        min-width: 120px;
    }

    ::v-deep .el-dropdown-menu__item {
        text-align: center;
    }
</style>